<template>
  <view class="contain" v-if="isAuth&&isLogin">
    <view class="fixed-top h-46 flex bg-color-w box-c" :style="{ 'padding-top': top + 'px' }">
      <!--      <view @click="back(1)" class="flex f-a-c f-s-0 padding-lr10 van-icon van-icon-arrow-left f20-size"></view>-->
      <xcx-header></xcx-header>
    </view>

    <view>
      <!-- 店铺分类 -->
      <view class="flex bg-color-f7" style="position: relative;height: 100vh;"
            :style="{ 'padding-top': top +46+ 'px' }">
        <block v-if="shop.cateStyle == 1">
          <scroll-view scroll-y="true" class="flex f-c f-s-0 w100 bg-color-fb padding-12"
                       :style="{'height': height+'px'}">
            <view @click="go('/pagesA/search/list?shopId='+shopId+'&catePid='+item.id+'&cateName='+item.name)"
                  v-for="(item,index) in cateList" :style="item.img | bgimg(700)+''" :class="item.img ? '':'bg-color'"
                  class="f-a-e f-j-c flex b-radius-10 padding-12 h-160 bg-img  margin-b10">
              <view class="flex f-a-c f-j-c w-200 h-20 f-w-b f12-size b-radius-2"
                    style="    background-color: hsla(0,0%,100%,.6);">{{ item.name }}
              </view>
            </view>
            <view :style="{ 'padding-top': !isIphonex ? '50px' : '84px'}"></view>
          </scroll-view>
        </block>
        <block v-if="shop.cateStyle == 2">
          <scroll-view scroll-y="true" class="w100 bg-color-fb padding-12" :style="{'height': height+'px'}">
            <view class="grid grid-c-3">
              <view @click="go('/pagesA/search/list?shopId='+shopId+'&catePid='+item.id+'&cateName='+item.name)"
                    v-for="(item,index) in cateList" class="flex f-c f-a-c f-j-c">
                <view :style="item.img | bgimg(300)+''" class="flex w-80 h-80 bg-img"></view>
                <text class="f12-size margin-t4">{{ item.name }}</text>
              </view>
            </view>
            <view :style="{ 'padding-top': !isIphonex ? '50px' : '84px'}"></view>
          </scroll-view>
        </block>
        <block v-if="shop.cateStyle == 4 || shop.cateStyle == 3">
          <scroll-view :scroll-into-view="'cate'+cateActive" scroll-y="true" class="flex f-c f-s-0 w-100 bg-color-fb "
                       :style="{'height': height+'px'}">
            <view @click="cateActive=index" v-for="(item,index) in cateList"
                  :class="index === cateActive ? 'cate-on' : ''" :id="'cate'+index"
                  class="flex f-s-0 h-50 f-a-c f-j-c f12-size t-color-5 ">{{ item.name }}
            </view>
            <view :style="{ 'padding-top': !isIphonex ? '50px' : '84px'}"></view>
          </scroll-view>
          <scroll-view v-if="cateList.length > 0 && cateList[cateActive] && cateList[cateActive]['children']"
                       scroll-y="true" class="flex f-c f-s-0 flex-1 padding-10  " :style="{'height': height+'px'}">
            <view v-for="item in cateList[cateActive]['children']"
                  class="bg-color-w b-radius-10  wrap-sub-cate padding-10">
              <view @click="go('/pagesA/search/list?shopId='+shopId+'&cateTid='+item.id+'&cateName='+item.name)"
                    class="flex f-a-c f-j-s">
                <text class="t-color-5 f12-size">{{ item.name }}</text>
                <text class="flex f-a-c f-j-c van-icon van-icon-arrow t-color-9 f16-size"></text>
              </view>
              <view v-if="shop.cateStyle == 4" class="flex f-w">
                <view
                    @click="go('/pagesA/search/list?shopId='+shopId+'&cateTid='+child.pid+'&cateId='+child.id+'&cateName='+child.name)"
                    v-for="(child,idx) in item.children" class="flex f-s-0 sub-item f-c f-a-c f-j-c margin-t20">
                  <view class="flex w-60 h-60 bg-img  b-radius-5" :style="child.img | bgimg(300)+''"></view>
                  <view class="f12-size t-color-6 margin-t4">{{ child.name }}</view>
                </view>
              </view>
            </view>
            <view :style="{ 'padding-top': !isIphonex ? '50px' : '84px'}"></view>
          </scroll-view>
        </block>
      </view>
      <!-- 店铺分类 end-->
    </view>


    <tab-bar ref="tabbar" :active="2" :isShow="false" :showLogin="false"></tab-bar>
  </view>

  <view class="contain2" v-else>
    <view class="fixed-top h-46 flex bg-color-w box-c" :style="{ 'padding-top': top + 'px' }">
      <!--      <view @click="back(1)" class="flex f-a-c f-s-0 padding-lr10 van-icon van-icon-arrow-left f20-size"></view>-->
      <xcx-header></xcx-header>
    </view>
    <view style="flex-wrap: wrap;">
      <view>
        <span v-if="!isLogin">用户未登录，请前往登录</span>
        <span v-if="isLogin&&!isAuth">用户未认证，请前往认证</span>
      </view>

      <view style="margin-top: 10px">

        <u-button v-if="!isLogin" type="primary" @click="gotologin" :ripple="true" ripple-bg-color="#909399">前往登录
        </u-button>
        <u-button v-if="isLogin&&!isAuth" type="primary" @click="gotoanth" :ripple="true" ripple-bg-color="#909399">
          前往认证
        </u-button>
      </view>
    </view>
    <notice></notice>
    <tab-bar ref="tabbar" :showLogin="false" :active="0" :isShow="false" :isAuth="isAuth"></tab-bar>
  </view>
</template>
<style scoped>
@import url('../../static/css/page/white.css');
@import url('../../static/css/shops/shops.css');

.contain2 {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 设置容器高度适应屏幕 */
}

</style>
<script>
import couponList from '../common/couponlist.vue';
import goodsShopList from './../../pages/index/components/goodslist.vue'
import groupList from './../../pages/index/components/groupgoods.vue'

const API = require('../../utils/api/shops.js').default;
const $ = require('../../utils/api.js');
let self;
export default {
  data() {
    return {
      top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
      isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
      shopId: uni.getStorageSync('userInfo').shopId,
      isLogin: uni.getStorageSync('token') ? true : false,
      isAuth: uni.getStorageSync('userInfo').shopStatus == 1 ? true : false,
      active: 0,
      sortType: 1,
      tabStatus: 0,
      cateList: [],
      cateActive: 0,
      height: 0,
      shop: '',
      id: '',
      isLike: false,
      list: [],
      page: 1,
      pageSize: 20,
      totalPage: 1,
      sort: '',
      couponList: [],
      banner: [],
    };
  },
  onLoad: function (options) {
    self = this;

    let height = getApp().globalData.height;
    height = height - 46 - this.top;
    this.height = height;
    if (options.tabStatus && options.tabStatus != '') {
      this.changeTab(options.tabStatus)
    }
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.tabbar.reloadHeight();
      this.$refs.tabbar.getChatLen();
    })

    this.isLogin = uni.getStorageSync('token') ? true : false
    this.isAuth = uni.getStorageSync('userInfo').shopStatus == 1 ? true : false
    this.init()
    // let isLogin = uni.getStorageSync('token') ? true : false
    // let isAuthShop = uni.getStorageSync('userInfo').shopStatus == 1 ? true : false

    // if (!isLogin) {
    //   $.$toast("请先登录再查看商家分类");
    //   setTimeout(() => {
    //     $.go('/pagesB/passport/login');
    //   }, 1000);
    //
    // } else {
    //   if (!isAuthShop) {
    //     $.$toast("请先认证再查看商家分类");
    //     setTimeout(() => {
    //       $.go('/pages/user/index');
    //     }, 1000);
    //   }
    // }

  },
  methods: {
    gotoanth() {
      $.go('/pages/user/index');
    },
    gotologin() {
      $.go('/pagesB/passport/login');
    },
    getCateList() {
      $.ajax({
        url: API.shopCateApi,
        data: {"shopId": self.shopId},
        method: 'GET',
        success(res) {
          self.cateList = res.data ? res.data : [];
        }
      })
    },

    getDetail() {
      $.ajax({
        url: API.shopDetailApi,
        data: {"shopId": self.shopId},
        method: 'GET',
        success(res) {
          self.shop = res.data ? res.data : '';
          self.isLike = self.shop != '' ? self.shop.isCollectShop : false;
          let img = self.shop.banner ? self.shop.banner : '';
          if (img != '' && img.indexOf('|') >= 0) {
            self.banner = img.split('|');
          } else {
            self.banner = [img];
          }
        }
      })
    },
    init() {
      if (uni.getStorageSync('userInfo')){
        this.shopId =  uni.getStorageSync('userInfo').shopId
      }
      if (this.shopId) {
        this.getDetail();
        this.getCateList();
      }
      uni.stopPullDownRefresh();
    },
  },
  created() {
  },
  computed: {
    i18n() {
      return this.$t('search')
    },
    i18nShop() {
      return this.$t('shop')
    },
  },
  mounted() {
  },
  destroyed() {
  },
  components: {couponList, goodsShopList, groupList},
  onPullDownRefresh() {
    this.init()
  },
  onReachBottom() {
  }
}
</script>
